{% extends "admin_base.html" %}

{% block title %}Add a New Node{% endblock %}

{% block content %}
<div class="col-9">
	<ul class="nav nav-tabs" id="config_tabs">
		<li class="active"><a href="#info" data-toggle="tab">Information</a></li>
		<li><a href="#allocation" data-toggle="tab">Allocation</a></li>
		<li><a href="#ftp" data-toggle="tab">FTP</a></li>
	</ul>
	{% if get.disp is defined and get.disp != 1 %}
		<br />
		<div class="alert alert-danger">
			{% if get.disp == 'missing_warn' %}
				You must agree to the warning before updating the information.
			{% elseif get.disp == 'missing_args' %}
				Not all arguments were passed by the script.
			{% elseif get.disp == 'ip_fail' %}
				The IP address provided for FTP or the node FQDN was invalid.
			{% elseif get.disp == 'n_fail' %}
				The node name does not meet the requirements (1-15 characters, a-zA-Z0-9_.-).
			{% elseif get.disp == 'add_port_fail' %}
				The port list entered was invalid.
			{% endif %}
		</div>
	{% endif %}
	<div class="tab-content">
		<div class="tab-pane active" id="info">
			<h3>Basic Information</h3><hr />
			<form action="ajax/update/basic.php" method="post">
				<fieldset>
					<div class="form-group">
						<label for="name" class="control-label">Node Name</label>
						<div>
							<input type="text" name="name" value="{{ node.node }}" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label for="ip" class="control-label">Node FQDN</label>
						<div>
							<input type="text" name="fqdn" value="{{ node.fqdn }}" class="form-control" />
						</div>
					</div>
					<div class="form-group">
						<label for="name" class="control-label">GSD Secret Token</label>
						<div>
							<input type="text" readonly="readonly" value="{{ node.gsd_secret }}" class="form-control" />
							<p class="text-muted"><small>Please update your GSD configuration file and add this as a token that can connect and use it. You do <strong>not</strong> need to click the button below once you've done this. <a href="http://docs.pffr.me/en/latest/installing_nodes/#install-game-server-daemon" target="_blank">Whats this?</a></small></p>
						</div>
					</div>
					<div class="form-group">
						<div>
							<input type="hidden" name="nid" value="{{ node.id }}" />
							<input type="submit" value="Update Information" class="btn btn-primary" />
						</div>
					</div>
				</fieldset>
			</form>
			<hr />
			<h6>Sample GSD Configuration File</h6>
			<pre>{
	"daemon": {
		"listenport": {{ node.gsd_listen }},
		"consoleport": {{ node.gsd_console }}
	},
	"tokens": ["{{ node.gsd_secret }}"],
	"interfaces":{
		"rest":{},
		"console":{},
		"ftp":{
			"authurl": "{% if settings.https == 1 %}https:{% else %}http:{% endif %}{{ settings.master_url }}ajax/validate_ftp.php",
			"port": 21,
			"host": "127.0.0.1"
		}
	},
	"servers": []
}</pre>
		</div>
		<div class="tab-pane" id="allocation">
			<h3>IP &amp; Port Allocation</h3><hr />
			<form action="ajax/ports/add_port.php" id="addPorts" style="display: none;" method="post">
				<div class="form-group">
					<label for="add_ports" class="control-label" id="setTitle"></label>
					<div class="input-group">
						<input type="text" name="add_ports" value="" placeholder="enter a comma separated list of ports to add; enter to submit" class="form-control" />
						<span class="input-group-btn">
							<input type="hidden" name="add_ports_ip" value=""/>
							<input type="hidden" name="add_ports_node" value=""/>
							<button class="btn btn-primary" type="submit">&rarr;</button>
						</span>
					</div>
				</div>
			</form>
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th>IP Address</th>
						<th>Ports</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					{% for ip, ports in portlisting %}
						<tr><td style="vertical-align:top;">{{ ip }}<br /><a href="#/add/{{ ip }}/{{ node.id }}" class="clickToAdd" onclick="return false;">Add Port(s)</a></td>
						<td>
						{% for port, avaliable in ports %}
							{% if loop.index is odd %}
								{% if avaliable == 1 %}
									<span><a href="#/delete/{{ ip }}/{{ port }}/{{ node.id }}" class="deletePort" onclick="return false;"><i class="fa fa-toggle-off"></i></a>
								{% else %}
									<i class="fa fa-toggle-on"></i>
								{% endif %}&nbsp;&nbsp;&nbsp;{{ port }}<br /></span>
							{% endif %}
						{% endfor %}
						</td><td>
						{% for port, avaliable in ports %}
							{% if loop.index is even %}
								{% if avaliable == 1 %}
									<span><a href="#/delete/{{ ip }}/{{ port }}/{{ node.id }}" class="deletePort" onclick="return false;"><i class="fa fa-toggle-off"></i></a>
								{% else %}
									<i class="fa fa-toggle-on"></i>
								{% endif %}&nbsp;&nbsp;&nbsp;{{ port }}<br /></span>
							{% endif %}
						{% endfor %}
						</td>
						</tr>
					{% endfor %}
					<tr>
						<td><a href="#" data-toggle="modal" data-target="#toggle_popup" id="t_popup">Add New IP Address</a></td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div class="panel panel-default">
				<div class="panel-heading">Key</div>
				<div class="panel-body">
					<p><i class="fa fa-toggle-off"></i> (Port Available; Click to Delete Port)</p><p><i class="fa fa-toggle-on"></i> (Port Used; Cannot Delete)</p>
				</div>
			</div>
		</div>
		<div class="tab-pane" id="ftp">
			<h3>FTP Settings</h3><hr />
			<div class="well">
				<form action="ajax/update/ftp.php?do=ipuser" method="post">
					<fieldset>
						<div class="form-group">
							<label for="ip" class="control-label">FTP IP</label>
							<div>
								<input type="text" name="ip" value="{{ node.ip }}" class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<div>
								<input type="hidden" name="nid" value="{{ node.id }}" />
								<input type="submit" value="Update FTP Address" class="btn btn-primary" />
							</div>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block javascript %}
<div class="modal fade" id="toggle_popup" tabindex="-1" role="dialog" aria-labelledby="AddNewIP" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="add_new_ip">Add New IP Address</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-1"></div>
					<div class="col-10">
						<form action="ajax/ports/new_ip.php" method="post">
							<div class="row">
								<div class="form-group">
									<label for="ip_port" class="control-label">Available IPs &amp; Ports</label>
									<div>
										<textarea name="ip_port" class="form-control" rows="5" placeholder="127.0.0.1|25565,25567,25569,25571,25573,25575 OR 25565-25570"></textarea>
										<p class="text-muted" style="margin: 0 0 -10.5px;"><small><em>Enter one IP address per line, followed by a pipe (|) and then a list of each available port separated with commas OR with a range of ports.</em></small></p>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="form-group">
									<div>
										<input type="hidden" name="nid" value="{{ node.id }}" />
										<input type="submit" class="btn btn-primary" name="submit" value="Add New IPs" />
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="col-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		setActiveOption('node-list');
		$(".clickToAdd").click(function(){
			var rawUrl = $(this).attr("href");
			var exploded = rawUrl.split('/');
			var ip = exploded[2];
			var node_id = exploded[3];
			$("#addPorts").slideUp(function(){
				$("#setTitle").html('Add Ports for '+ip);
				$("input[name='add_ports']").val("");
				$("input[name='add_ports_ip']").val(ip);
				$("input[name='add_ports_node']").val(node_id);
				$("#addPorts").slideDown();
			});
		});
		$(".deletePort").click(function(){

			var rawUrl = $(this).attr("href");
			var exploded = rawUrl.split('/');
			var ip = exploded[2];
			var port = exploded[3];
			var node_id = exploded[4];
			var conf = confirm("Are you sure you want to delete "+ip+":"+port);

				if(conf == true)
					{
						$.ajax({
							type: "POST",
							url: "ajax/ports/delete.php",
							data: { ip: ip, port: port, node: node_id},
							success: function(data) {
								$(".deletePort[href='#/delete/"+ip+"/"+port+"/"+node_id+"']").parent().fadeOut();
							}
						});
					}else{
						return false;
					}

		});
		if($.urlParam('error') != null){
			var field = $.urlParam('error');
			var exploded = field.split('|');
				$.each(exploded, function(key, value) {
					$('[name="' + value + '"]').parent().parent().addClass('has-error');
				});
		}
		$("#warning_1").click(function(){
			if($(this).is(":checked"))
				$("#disable_complete").removeClass("disabled");
			else
				$("#disable_complete").addClass("disabled");
		});
		$("#warning_2").click(function(){
			if($(this).is(":checked"))
				$("#disable_complete_pass").removeClass("disabled");
			else
				$("#disable_complete_pass").addClass("disabled");
		});

	});
</script>
{% endblock %}
